<!--  -->
<template>
  <div
    class="header"
    style="-webkit-app-region: drag"
    ref="header"
    @click="headerClick"
  >
    <div>
      <div class="Popularity">
        <i class="iconfont icon-renqiredu"></i
        >{{ this.$store.state.Popularity }}
      </div>
      <span class="name">{{ this.$store.state.userName }}</span>
    </div>
    <div ref="control" class="control" style="-webkit-app-region: no-drag">
      <span
        @click="onAudio"
        v-if="!isMute"
        class="iconfont icon-shengyin-01"
        style="-webkit-app-region: no-drag"
        title="全局音频开"
      >
      </span>
      <span
        @click="offAudio"
        v-if="isMute"
        class="iconfont icon-a-jingyin"
        style="-webkit-app-region: no-drag"
        title="全局音频关"
      >
      </span>
      <span @click="toHome" class="iconfont icon-Home" title="主页"></span>
      <span @click="toLogin" class="iconfont icon-shezhi" title="配置"></span>
      <span @click="refResh" class="iconfont icon-shuaxin" title="刷新"></span>
      <span @click="onTop" class="iconfont icon-ziyuan" title="置顶"></span>
      <span
        @click="FixedWindow"
        class="iconfont icon-a-tupianyihuifu-49"
        title="固定屏幕大小"
      ></span>
      <span @click="toLive" class="iconfont icon-zhibo-" title="直播姬"> </span>
      <span @click="toMusic" class="iconfont icon-yinle" title="点歌"></span>
      <span
        @click="miniWindow"
        class="iconfont icon-zuixiaohuaxi"
        title="最小化"
      ></span>
      <span
        @click="closeWindow"
        class="iconfont icon-guanbi1"
        title="关闭"
      ></span>
    </div>
  </div>
</template>

<script>
import { getUserInfo } from "../request/userInfo/index";
const { ipcRenderer } = window.require("electron");
import emitter from "../utill/emitter";
import store from "../store/index";
export default {
  components: {},
  data() {
    return {
      isActive: false,
      isFixedWindow: false,
      isLive: false,
      isMute: !store.state.isMute,
    };
  },
  created() {
    if (this.$store.state.mid !== "") {
      this.getData();
    }
  },
  mounted() {
    emitter.on("submit", () => {
      this.getData();
    });
  },
  methods: {
    getData() {
      getUserInfo(this.$store.state.mid).then((res) => {
        store.dispatch("userName", res.data.data.name);
      });
    },
    onTop() {
      this.isActive = !this.isActive;
      if (this.isActive) {
        ipcRenderer.send("onTop");
      } else {
        ipcRenderer.send("!onTop");
      }
    },
    closeWindow() {
      ipcRenderer.send("closeWindow");
    },
    miniWindow() {
      ipcRenderer.send("miniWindow");
    },
    FixedWindow() {
      this.isFixedWindow = !this.isFixedWindow;
      if (this.isFixedWindow) {
        ipcRenderer.send("FixedWindow");
      } else {
        ipcRenderer.send("!FixedWindow");
      }
    },
    // 不静音
    onAudio() {
      this.$store.commit("changeIsMute", false);
      window.localStorage.setItem('isMute',false)
      this.isMute = true;
    },
    // 静音
    offAudio() {
      this.$store.commit("changeIsMute", true);
      window.localStorage.setItem('isMute',true)
      this.isMute = false;
    },
    refResh() {
      emitter.emit("refResh");
    },
    // 路由跳转
    toHome() {
      if (this.$route.path === "/") return;
      this.$router.push("/");
    },
    toLogin() {
      if (this.$route.path === "/setting") return;
      this.$router.push("/setting");
    },
    toLive() {
      this.isLive = !this.isLive;
      if (this.$route.path === "/Live") return;
      this.$router.push("/Live");
    },
    toMusic(){
      if (this.$route.path === "/setting") return;
      this.$router.push({name:'song-setting'})
    },
    headerClick(e) {
      let childrenNode = this.$refs.control.children;
      for (let i = 0; i < childrenNode.length; i++) {
        childrenNode[i].style.color = "#cdcbcb";
      }
      e.target.style.color = "#1296db";
    },
  },
};
</script>
<style lang='css' scoped>
.header {
  position: relative;
  border-bottom: 1px solid #1295db56;
}
.header,
.control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 30px;
  user-select: none;
  color: rgb(209, 209, 209);
}
.drag {
  width: 25%;
}
.drag span {
  margin-left: 10px;
  cursor: pointer;
}
.drag span:hover {
  color: #1296db;
  cursor: pointer;
}
.Popularity {
  margin-left: 20px;
}
.name {
  position: absolute;
  left: 45%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: tomato;
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}
.control span:hover {
  color: #1296db;
}
.control span {
  margin: 0 5px;
  cursor: pointer;
  font-size: 12px;
}
</style>